<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>

<%@ include file="/_taglib.jsp" %>

<%@ include file="/_navbar.jsp" %>

<script type="text/javascript">
<!--



		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		function save(thisForm){
			var treeObj = $.fn.zTree.getZTreeObj("roleRightTree");
			var checkedNodes = treeObj.getCheckedNodes(true);
			$("#role__rights").val(JSON.stringify(checkedNodes));
			return ajaxFormSubmit(thisForm,'sys/role/list');
		}
		
		$(function (){
			$.getJSON("sys/url/ajaxGetAllUrlsByRole/${role.id}", function(json){
				$.fn.zTree.init($("#roleRightTree"), setting, json);
			});
			refreshUserRole();
		});
		
		function refreshUserRole(){
            $('#field-table').bootstrapTable('destroy');
			$('#field-table').hide();			
			$.getJSON("sys/user/ajaxLoadUserByRole/${role.id}", function(json){
				
				$.each(json , function(index, item){ 
					item.operation= "<a href='#' onclick='delUserRole("+item.userid+",${role.id})'>删除</a>";
				});				
				
				$('#field-table').bootstrapTable({
			        data: json,
			        showAdd:false,
			        showDelete:false,        			        
			        search: false,
			        pagination: false,
			        showColumns: false,
			        showToggle: false,
			        showRefresh: false
			    }); 
				$('#field-table').show();
			});
		}
		
		function openDlg(){
			var dlgHtml = "";
			dlgHtml = dlgHtml + '<div id="dlg" style="display:none">';
			dlgHtml = dlgHtml + '<div>';
			dlgHtml = dlgHtml + '	<label>请输入要加入的用户名</label>'; 
			dlgHtml = dlgHtml + '	<input name="username4role" id="username4role" value="" type="text" class="form-control" placeholder="如：1890718****">';
			dlgHtml = dlgHtml + '</div>';
			dlgHtml = dlgHtml + '<div class="box-footer" align="center" style="margin-top:10px">';
			dlgHtml = dlgHtml + '	<button type="button" class="btn btn-primary" onclick="addUserRole();">添加</button>';
			dlgHtml = dlgHtml + '</div>';
			dlgHtml = dlgHtml + '</div>';
			
			$dialog = $(dlgHtml).appendTo($('body'));
			$dialog.dialog({
				modal: true,
				close: function(){
					$dialog.html("");
					$dialog.remove();
				}
			});
		}
		
		function delUserRole(userId,roleId){
			var url = "sys/role/ajaxDelUserRole";
		    $.ajax({
		        type: 'post',
		        url: url,
		        data: {userId:userId,roleId:roleId},
		        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
		        dataType: 'html',
		        success: function (res) {
		        	alert("操作成功！");
		        	refreshUserRole();
		        },
		        error: function (res) {
		            console.debug("_showDialog",res);
					alert("ajax error status = "+res.status+" error text = " + res.statusText);
		        }
		    });				
		}
		
		function addUserRole(){
			var username = $("#username4role").val();
			var roleId = '${role.id}';
			var url = "sys/role/ajaxAddUserRole";
			$("#dlg").dialog('close');
		    $.ajax({
		        type: 'post',
		        url: url,
		        data: {username:username,roleId:roleId},
		        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
		        dataType: 'html',
		        success: function (res) {
		        	alert("操作成功！");
		        	refreshUserRole();
		        },
		        error: function (res) {
		            console.debug("_showDialog",res);
					alert("ajax error status = "+res.status+" error text = " + res.statusText);
		        }
		    });				
			//alert($("#username4role").val());
			//alert(${role.id});
		}
//-->
</script>

<section class="content">
		<div class="col-md-11">
			<!-- 
			<form role="form" action="sys/dictionary/dict/save" method="post" onsubmit="return ajaxFormSubmit(this,'sys/dictionary/dict/list')">
			-->
			<form role="form" action="sys/role/save" method="post" onsubmit="return save(this);">
				
				<input type="hidden" id="role__id" name="role.id" value="${role.id}">
				<input type="hidden" id="role__rights" name="role_right" value="">
				<!-- general form elements disabled -->
				<div class="box">
					<div class="box-body">

						<div class="row">

							<div class="col-xs-3">
								<div class="form-group">
									<label>角色名称</label> 
									<input name="role.roleName" value="${role.roleName}" type="text"
										class="form-control" placeholder="Enter ...">
								</div>
							</div>


						</div>
						<div class="row">

							<div class="col-xs-12">
								<div class="form-group">
									<label>角色描述</label> 
									<textarea class="form-control" name="role.description" id="role_description" rows="3" cols="3" placeholder="Enter ...">${role.description}</textarea>
								</div>
							</div>


						</div>
						
						<div class="row">
							<div class="col-md-6">
								<div class="box box-info">
									<div class="box-header">
                                    	<i class="fa fa-fw fa-unlock"></i>
                                    	<h3 class="box-title">角色权限</h3>
                                	</div>
									<div class="box-body">
										<div class="zTreeDemoBackground left">
											<ul id="roleRightTree" class="ztree"></ul>
										</div>
                                	</div>                                	
								</div>
							</div>
							<div class="col-md-6">
								<div class="box box-info">
									<div class="box-header">
                                    	<i class="fa fa-fw fa-users"></i>
                                    	<h3 class="box-title">角色成员</h3>
                                    	<a href="#" onclick="openDlg();"><i class="fa fa-fw fa-plus" style="float:right;font-size:20px;padding: 10px 20px 10px 10px;" ></i></a>
                                	</div>
									<div class="box-body">
					                    <table id="field-table">
										    <thead>
												<tr>
											        <th data-field="username">用户账号</th>
											        <th data-field="fullname">用户名称</th>
											        <th data-field="operation">操作</th>
												</tr>				    
										    </thead>
					                    </table>
                                	</div>                                	
								</div>							
							</div>
						</div>
					</div>					<!-- /.box-body -->
					<div class="box-footer" align="center">
						<button type="submit" class="btn btn-primary">保存</button>
					</div>
				</div>				<!-- /.box -->
			</form>
		</div>
</section>
</div>

<%@ include file="/_edit_js.jsp" %>
